<template>
	<view class="page">
		<view class="bannerVue relative">
			<image src="../../static/index/success.png" mode="heightFix" class="absolute-auto"></image>
			<view class="innerVue absolute-auto">
				<!-- #ifdef MP-WEIXIN -->
					<topVue background="transparent"></topVue>
				<!-- #endif -->
				<view class="userVue margin40 flex align-center">
					<view class="avatarVue relative">
						<u-avatar src="1" size="115"></u-avatar>
					</view>
					<view class="right flex-column flex-between">
						<view class="flex-between align-center">
							<view class="flex align-center">
								<view class="name fw600 fs30">黄莉华</view>
								<u-tag
									text="♀ 28" 
									shape="circle" 
									bg-color="#FF719B" 
									color="#fff" 
									border-color="#FF719B" 
									size="mini" 
									style="margin-left: 20rpx;"/>
								<u-tag
									text="♂ 28" 
									shape="circle" 
									bg-color="#5696FF" 
									color="#fff" 
									border-color="#5696FF" 
									size="mini" 
									style="margin-left: 20rpx;"/>
								<u-tag 
									text="已实名" 
									shape="circle" 
									bg-color="#FF9571" 
									color="#fff" 
									border-color="#FF9571" 
									size="mini" 
									style="margin-left: 20rpx;"/>
							</view>
							<image src="../../static/person/edit.png" style="width: 48rpx; height: 48rpx;" @click="$tools.route('./setup/edit')"></image>
						</view>
						<view class="uuid">ID:223488584</view>
						<view class="flex" style="margin-top: 10rpx;">
							<u-tag
								text="年卡会员" 
								shape="circle" 
								bg-color="#EBD1AA" 
								color="#fff" 
								border-color="#EBD1AA" 
								size="mini"/>
							<u-tag
								text="MBTI人格" 
								shape="circle" 
								bg-color="#FC132F" 
								color="#fff" 
								border-color="#FC132F" 
								size="mini" 
								style="margin-left: 20rpx;"/>	
						</view>
					</view>
				</view>
				<view class="box margin60">
					<view class="flex-between">
						<view class="li flex-column flex-between relative" @click="$tools.route('./assets')">
							<view class="name fw600 fs30">我的资产</view>
							<text>2570，去提现～</text>
							<image 
							src="../../static/person/2.png" style="width: 78rpx; height: 78rpx; top: 20rpx; right: 20rpx;" class="absolute"></image>
						</view>
						<view class="li flex-column flex-between relative" @click="$tools.route('./certification/index')">
							<view class="name fw600 fs30">我的认证</view>
							<text>我的认证（0/2）</text>
							<image 
							src="../../static/person/1.png" style="width: 78rpx; height: 78rpx; top: 20rpx; right: 20rpx;" class="absolute"></image>
						</view>
					</view>
					<view class="fs32 fw600 margin40">常用功能</view>
					<view class="menuVue flex margin50">
						<view class="menu flex-column align-center" @click="$tools.route('./activity_join')">
							<image src="../../static/person/5.png" style="width: 44rpx; height: 44rpx; margin-bottom: 20rpx;"></image>
							<text>参加的活动</text>
						</view>
						<view class="menu flex-column align-center" @click="$tools.route('./activity_publish')">
							<image src="../../static/person/6.png" style="width: 44rpx; height: 44rpx; margin-bottom: 20rpx;"></image>
							<text>发布的活动</text>
						</view>
						<view class="menu flex-column align-center" @click="$tools.route('./vip')">
							<image src="../../static/person/7.png" style="width: 52rpx; height: 44rpx; margin-bottom: 20rpx;"></image>
							<text>会员卡</text>
						</view>
						<view class="menu flex-column align-center" @click="$tools.route('./setup/index')">
							<image src="../../static/person/8.png" style="width: 44rpx; height: 44rpx; margin-bottom: 20rpx;"></image>
							<text>设置</text>
						</view>
					</view>
					<view class="testVue margin60" @click="$tools.route('./test')"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.bannerVue {
		width: 100%;
		height: 740rpx;
		.innerVue {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.8);
			.userVue {
				width: 690rpx;
				.avatarVue {
					width: 118rpx;
					height: 118rpx;
					background: #fff;
					border-radius: 50%;
					border: 3rpx solid #fff;
				}
				.right {
					flex: 1;
					height: 138rpx;
					padding-left: 20rpx;
					.name {
						color: #fff;
					}
					.sex {
						width: 92rpx;
						height: 40rpx;
						background: #FF719B;
						border-radius: 20rpx;
						margin-left: 20rpx;
					}
					.state {
						width: 104rpx;
						height: 40rpx;
						background: #FF9571;
						border-radius: 20rpx;
						margin-left: 20rpx;
						text-align: center;
						line-height: 40rpx;
						color: #fff;
						font-size: 24rpx;
					}
					.uuid {
						color: #fff;
						font-size: 26rpx;
					}
				}
			}
			.box {
				width: 750rpx;
				height: 800rpx;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 0px 0px;
				padding: 36rpx 30rpx 0;
				.li {
					width: 330rpx;
					height: 152rpx;
					background: rgba(231,77,69,0.1);
					border-radius: 8rpx;
					padding: 40rpx 30rpx;
					text {
						color: #666;
						font-size: 24rpx;
					}
				}
				.li:nth-child(2) {
					background: rgba(58,150,253,0.1);
				}-
				.menuVue {
					width: 690rpx;
					.menu {
						width: 25%;
						text {
							font-size: 24rpx;
							color: #333;
							font-weight: 600;
						}
					}
				}
				.testVue {
					width: 690rpx;
					height: 160rpx;
					background: #f5f5f5;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>